<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<title></title>
		<script src="jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<style type="text/css">
			*{
				margin: 0;
				padding: 0;
			}
			
			#box{
				width: 300px;
				height: 450px;
				border: 3px solid blue;
				margin: 50px auto;
				
				/*background: -moz-linear-gradient(top left,blue,orange);*/
				background:url(11.jpg) no-repeat; 
				border-radius: 10px;
			}
			#box .shang{
				width: 280px;
				height: 50px;
				background: white;
				font-size: 36px;
				line-height: 50px;
				text-align: right;
				
			}
			#box .btm{
				width: 280px;
				height: 60px;
				background: white;
				font-size: 48px;
				line-height: 60px;
				text-align: right;
			}
			form{
				width: 290px;
				height: 290px;
				margin: 0 auto;
				display: flex;
				justify-content: space-around;
				align-content: space-around;
				flex-wrap: wrap;
			}
			form input{
				width: 60px;
				height: 60px;
				display: block;
				cursor:pointer;
				font-size:28px;
				line-height: 50px;
				text-align: center;
				border-radius: 50%;
				background:url(123.png) no-repeat 50% 50%;
				background-size: contain;
			}
			form input.ysf{
				color:blue;
			}
			form input.num{
				color: firebrick;
			}
			form input.jieguo{
				color: green;
			}
		</style>
	</head>
	<body>
		<div id="box">
			<div style="width: 280px;height: 110px;margin: 20px auto; ">
				<div class="shang"></div>
				<div class="btm"></div>
			</div>
			<form action="" method="post">
				<input type="button" name="num7" value="7" class="num" />
				<input type="button" name="num8" value="8" class="num"/>
				<input type="button" name="num9" value="9" class="num"/>
				<input type="button" name="num+" value="+" class="ysf"/>
				<input type="button" name="num4" value="4" class="num"/>
				<input type="button" name="num5" value="5" class="num"/>
				<input type="button" name="num6" value="6" class="num"/>
				<input type="button" name="num-" value="-" class="ysf"/>
				<input type="button" name="num1" value="1" class="num"/>
				<input type="button" name="num2" value="2" class="num"/>
				<input type="button" name="num3" value="3" class="num"/>
				<input type="button" name="num*" value="*" class="ysf"/>
				<input type="button" name="num." value="C" class="C"/>
				<input type="button" name="num0" value="0" class="num"/>
				<input type="submit" value="=" class="jieguo"/>
				<input type="button" name="num/" value="/" class="ysf"/>
			</form>
		</div>
		<script type="text/javascript">
			var num1="";//数值1
			var num2="";//数值2
			var ysf="";//运算符
			var jie="";//中间结果
			var jieguo="";//运算结果
			var btm=$("#box .btm");
			var shang=$("#box .shang");
			
			//点击事件
			$("form input.num").click(function(){
//				判断有没有运算符
				if(ysf==""){
					num1 =num1 + $(this).val();
					btm.html(num1);
				}else{
					shang.html(num1);
					num2 =num2 + $(this).val();
					btm.html(num2);
				}
			})
			$("form input.C").click(function(){
				num1="";//数值1
				num2="";//数值2
			 	ysf="";//运算符
				jie="";//中间结果
				jieguo="";//运算结果
				btm.html("");
				shang.html("");
			})
			
			$("form input.ysf").click(function(){
//				判断num2有没有数值
				if(num2){
//					有数值就运算
					switch(ysf){
						case "+":
		                jie = parseFloat(num1) + parseFloat(num2);
		                break;
		            	case "-":
		                jie = parseFloat(num1) - parseFloat(num2);
		                break;
		                case "*":
		                jie = parseFloat(num1) * parseFloat(num2);
		                break;
		                case "/":
		                jie = parseFloat(num1) / parseFloat(num2);
		                break;
		            }
		            num1=jie;
		            num2="";
					shang.html(num1+ysf);
					btm.html(num2);
				}
				ysf=$(this).val();
				shang.html(num1+ysf);
				btm.html("");
			})
			$("form input.jieguo").click(function(){
				
				switch(ysf){
				case "+":
                jieguo = parseFloat(num1) + parseFloat(num2);
                break;
            	case "-":
                jieguo = parseFloat(num1) - parseFloat(num2);
                break;
                case "*":
                jieguo = parseFloat(num1) * parseFloat(num2);
                break;
                case "/":
                jieguo = parseFloat(num1) / parseFloat(num2);
                break;
               }
            	shang.html("");
            	num1=jieguo;
				btm.html(num1);
//				num1="";//数值1
				num2="";//数值2
				ysf="";//运算符
				jie="";//中间结果
				jieguo="";
			})
				
		</script>
	</body>
</html>
